<template>
    <div class="container">
        <HeaderBar />
        <div class="order_type">
            <div
                class="order_type_item"
                :class="[status == 0 ? 'active' : '']"
                @click="changeType(0)"
            >
                全部
            </div>
            <div
                class="order_type_item"
                :class="[status == 1 ? 'active' : '']"
                @click="changeType(1)"
            >
                已下单
            </div>
            <div
                class="order_type_item"
                :class="[status == 2 ? 'active' : '']"
                @click="changeType(2)"
            >
                已签约
            </div>
            <div
                class="order_type_item"
                :class="[status == 3 ? 'active' : '']"
                @click="changeType(3)"
            >
                已发货
            </div>
            <div
                class="order_type_item"
                :class="[status == 4 ? 'active' : '']"
                @click="changeType(4)"
            >
                已完成
            </div>
            <div
                class="order_type_item"
                :class="[status == 5 ? 'active' : '']"
                @click="changeType(5)"
            >
                已取消
            </div>
        </div>
        <div class="container_main">
            <div class="orderlist">
                <div
                    class="orderlist_item"
                    v-for="(item, index) in list"
                    :key="item.id"
                >
                    <div class="orderlist_item_header">
                        <div class="orderlist_item_header_tradeNo">
                            订单编号 {{item.tradeNo}}
                            <span>{{item.createTime}}</span>
                        </div>
                        <div class="orderlist_item_header_status">
                            {{item.statusDesc}}
                        </div>
                    </div>
                    <!-- <div class="orderlist_item_goods">
                        <img
                            class="orderlist_item_goods_item"
                            v-for="json in item.orders"
                            :key="json.id"
                            :src="json.itemMainPic"
                        />
                    </div> -->
                    <div class="orderlist_item_goods">
                        <div class="orderlist_item_goods_operate_l" @click="slide(index)">
                            <img
                                src="../../assets/images/prev.png"
                                class="orderlist_item_goods_prev"
                            />
                        </div>
                        <slider ref="slider" :options="options">
                            <slideritem
                                v-for="json in item.orders"
                                :key="json.id"
                                style="width: 120px;"
                            >
                                <img
                                    class="orderlist_item_goods_item"
                                    :src="json.itemMainPic"
                                />
                            </slideritem>
                            <div slot="loading">loading...</div>
                        </slider>
                        <div class="orderlist_item_goods_operate_r" @click="slideNext(index)">
                            <img
                                src="../../assets/images/next.png"
                                class="orderlist_item_goods_next"
                            />
                        </div>
                    </div>
                    <div class="orderlist_item_footer">
                        <div class="orderlist_item_footer_info">
                            共{{item.itemCount}}份商品  订单金额  <span>¥{{item.itemAmount}}</span>
                        </div>
                        <div class="orderlist_item_footer_operates">
                            <div
                                class="orderlist_item_footer_operates_item"
                                v-if="item.status == 1"
                                @click="cancelOrder(item.id)"
                            >
                                取消订单
                            </div>
                            <div
                                class="orderlist_item_footer_operates_item"
                                v-if="item.status == 1"
                                @click="exprotOrder(item.id)"
                            >
                                导出清单
                            </div>
                            <div
                                class="orderlist_item_footer_operates_item"
                                @click="orderDetail(item.id)"
                            >
                                详情
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pagination">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="pageNo"
                    :page-size="pageSize"
                    layout="total, prev, pager, next"
                    :total="totalCount"
                >
                </el-pagination>
            </div>
        </div>
        <iframe frameborder="0" name="downExcel" style="display:none"></iframe>
    </div>
</template>
<script>
import HeaderBar from '@components/HeaderBar';
import { slider, slideritem } from 'vue-concise-slider'
import {
    getTradeList,
    PostTradeCancel,
    GetTradeExport
} from '@api/api';
export default {
    components: {
        HeaderBar,
        slider,
        slideritem
    },
    data() {
        return {
            status: null,
            pageNo: 1,
            pageSize: 10,
            list: [],
            totalPage: null,
            totalCount: null,
            options: {
                pagination: false,
                currentPage: 0,
                tracking: false,
                thresholdDistance: 100,
                thresholdTime: 300,
                infinite: 6,
                slidesToScroll: 6,
                loop: false
            }
        }
    },
    created () {
        let {
            status
        } = this.$route.query; 
        this.status = status;
        this.getList();
    },
    methods: {
        slideNext (key) {
            this.$refs.slider[key].$emit('slideNext')
        },
        slide (key) {
            this.$refs.slider[key].$emit('slidePre')
        },
        changeType(type) { 
            if (type == 0) {
                this.status = '';
            } else {
                this.status = type;
            }
            this.getList();
        },
        getList() {
            let {
                status,
                pageNo,
                pageSize,
            } = this;
            getTradeList({
                status,
                pageNo,
                pageSize,
            }).then(res=>{
                this.totalPage = res.totalPage;
                this.totalCount = res.totalCount;
                this.list = res.data;
            })
        },
        handleSizeChange(val) {
            this.pageNo = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.pageNo = val;
            this.getList();
        },
        cancelOrder(id) {
            let _this = this;
            _this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                PostTradeCancel({id: id})
                    .then(res=>{
                        _this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        _this.getList();
                    });
            }).catch(() => {});
        },
        exprotOrder(id) {
            GetTradeExport({id: id})
                .then(res=>{
                    this.download(res.data);
                    this.$message({
                        type: 'success',
                        message: '导出成功!'
                    });
                });
        },
        orderDetail(id) {
            this.$router.push({path: `/order/${id}`});
        },
        download (data) {
            // let link = document.createElement('a');
            // link.style.display = 'none';
            // link.href = data;
            // let timestamp = new Date().getTime();
            // link.download = timestamp + '.xls'
            // document.body.appendChild(link)
            // link.click()
            let iframe = window.frames['downExcel'];
            iframe.location.href = data;
        }
    }
}
</script>
<style>
body {
    background: #fff;
}
</style>
<style scoped>
    @import './index.css';
</style>